import React, { Component } from 'react'

export default function withFar(WrappedComponent) {
  return class Far extends Component {
    // 添加静态属性displayName
    // 目的: 是因为react调试工具,展示组件名称时,优先展示静态属性displayName,如果没有则展示静态属性name
    static displayName = 'With' + WrappedComponent.name
    state = {
      username: '',
      password: '',
      repassword: '',
    }

    handleChange = (name) => {
      return (e) => {
        this.setState({
          [name]: e.target.value.trim(),
        })
      }
    }
    render() {
      const { username, password, repassword } = this.state
      return (
        <WrappedComponent
          // username={username}
          // password={password}
          // repassword={repassword}

          // 利用props批量传递数据的写法:
          {...this.state}
          // 利用props批量传递数据的写法.把写在Far组件的所有的props数据,全部传给子组件
          {...this.props}
          handleChange={this.handleChange}
        ></WrappedComponent>
      )
    }
  }
}
